<template>
	<view>
		<view class="head">
			<image class="bj_img" src="@/static/sy/my-output-value/bj_img.png" mode=""></image>
			<view class="head_box">
				<view class="head_box_rule" @click="jumpRule">
					<image src="@/static/sy/my-output-value/wenhao.png" mode=""></image>
					<text>产值规则</text>
				</view>
				<view class="head_box_coefficient">
					<view class="head_box_coefficient_h">
						<image src="@/static/sy/my-output-value/chanzhi.png" mode=""></image>
						<text>产值系数</text>
					</view>
					<view class="head_box_coefficient_num">{{info.outputValue}}</view>
				</view>
				<view class="head_box_nav">
					<view class="head_box_nav_box">
						<view class="head_box_nav_box_h">
							<image src="@/static/sy/my-output-value/wodesuanli.png" mode=""></image>
							<text>我的算力</text>
						</view>
						<view class="head_box_nav_box_num">{{info.value}}</view>
					</view>
					<view class="line"></view>
					<view class="head_box_nav_box">
						<view class="head_box_nav_box_h">
							<image src="@/static/sy/my-output-value/rank.png" mode=""></image>
							<text>算力排行</text>
						</view>
						<view class="head_box_nav_box_num">{{info.startRange}}-{{info.endRange}}%</view>
					</view>
				</view>
			</view>
		</view>
		<view class="detail">
			<view class="detail_title">算力变动</view>
			<view class="detail_list">
				<view class="detail_list_box" v-for="(item,index) in dataList" :key="index">
					<view class="detail_list_box_h">
						<view class="detail_list_box_h_txt ellipseHide">
							<text v-if="item.changeType==1">算力提升</text>

							<text v-if="item.changeType==2||item.changeType==3">算力降低</text>
						</view>
						<view class="detail_list_box_h_num" :class="item.changeType==1?'color_active':''">
							<text v-if="item.changeType==1">+</text>
							<text v-if="item.changeType==2 || item.changeType==3">-</text>
							<text>{{item.changeValue}}</text>
						</view>
					</view>
					<view class="detail_list_box_c">
						<text v-if="item.changeType==1">获得</text>
						<text v-if="item.changeType==2">转赠</text>
                        <text v-if="item.changeType==3">销毁</text>
						{{item.cardName}}
					</view>
					<view class="detail_list_box_time">{{item.createTime}}</view>
				</view>
				<view class="no_info" v-if="dataList.length==0">
					<image src="/static/my/order_no.png" mode="widthFix"></image>
					<text>暂无数据</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getMyOutputValue,hashRateChangeLs} from '@/api/sy.js'
	export default {
		data() {
			return {
				info:{},
				pageSize: 10, //每页记录数
				pageNum: 1, //当前页码
				listTotal: 0, //列表总数
				dataList:[], //算力列表
			}
		},
		onLoad() {
			this.getInfo()
			this.getList()
		},
		methods: {
			jumpRule(){ //跳转产值规则
				uni.navigateTo({
					url:'./output-value-rules/output-value-rules'
				})
			},
			async getInfo() {
				var res = await getMyOutputValue()
				this.info = res.result
			},
			async getList() { //获取算力列表
				uni.showLoading({ title:'加载中' })
				var _this = this
				// console.log(this.navList[this.headerIndex].status)
				let data = {
					pageSize: this.pageSize,
					pageNum: this.pageNum
				}
				try{
					const res = await hashRateChangeLs(data);
					uni.hideLoading()
					this.listTotal = res.result.total
					if (this.pageNum > 1) {
						this.dataList = this.dataList.concat(res.result.records); //将数据拼接在一起
					} else {
						this.dataList = res.result.records
					}
				}
				catch{
					uni.hideLoading()
				}finally{
					setTimeout(res=>{
						uni.hideLoading()
					},4000)
				}
				
			},
		},
		// 页面上拉触底事件的处理函数
		onReachBottom: function() {
			console.log("触底了", this.pageNum, Math.ceil(this.listTotal / this.pageSize), this.listTotal)
			if (this.pageNum >= Math.ceil(this.listTotal / this.pageSize)) {
				
			} else {
				this.pageNum++; //每触底一次 page + 1;
				this.getList()
			}
		}
	}
</script>

<style>
	page{
		background-color: #FCFCFD;
	}
	view{
		box-sizing: border-box;
	}
	.head{
		width: 100%;
		height: 502rpx;
		position: relative;
	}
	.bj_img{
		width: 100%;
		height: 100%;
	}
	.head_box{
		position: absolute;
		width: 100%;
		height: 100%;
		z-index: 1;
		top: 0;
	}
	.head_box_rule{
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding: 20rpx 20rpx 0 0;
		font-size: 24rpx;
		color: #FFFFFF;
	}
	.head_box_rule image{
		width: 27rpx;
		height: 28rpx;
		margin-right: 6rpx;
	}
	.head_box_coefficient{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.head_box_coefficient_h{
		display: flex;
		align-items: center;
		font-size: 28rpx;
		color: #FFFFFF;
		padding-top: 4rpx;
	}
	.head_box_coefficient_h image{
		width: 34rpx;
		height: 30rpx;
		margin-right: 6rpx;
	}
	.head_box_coefficient_num{
		font-size: 86rpx;
		color: #FFFFFF;
		font-weight: bold;
	}
	.head_box_nav{
		display: flex;
		align-items: center;
		padding-top: 20rpx;
	}
	.head_box_nav_box{
		width: 50%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.head_box_nav_box_h{
		display: flex;
		align-items: center;
		font-size: 28rpx;
		color: #FFFFFF;
	}
	.head_box_nav_box_h image{
		width: 34rpx;
		height: 30rpx;
		margin-right: 10rpx;
	}
	.head_box_nav_box_num{
		font-size: 40rpx;
		color: #FFFFFF;
		font-weight: bold;
		margin-top: 10rpx;
	}
	.line{
		width: 1rpx;
		height: 76rpx;
		background-color: #AAE7FF;
	}
	.detail{
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		margin: -134rpx 30rpx 0 30rpx;
		position: relative;
		z-index: 2;
		padding-bottom: 30rpx;
	}
	.detail_title{
		font-size: 32rpx;
		color: #222222;
		padding: 40rpx 44rpx 30rpx;
	}
	.detail_list{
		padding: 0 30rpx;
	}
	.detail_list_box{
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 16rpx #EAEAEA;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
	}
	.detail_list_box_h{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 12rpx;
	}
	.detail_list_box_h_txt{
		font-size: 30rpx;
		color: #222222;
		width: 380rpx;
		font-weight: bold;
	}
	.detail_list_box_h_num{
		font-size: 36rpx;
		color: #222222;
		font-weight: bold;
	}
	.detail_list_box_c{
		font-size: 28rpx;
		color: #666666;
		margin-bottom: 8rpx;
	}
	.detail_list_box_time{
		font-size: 26rpx;
		color: #999999;
	}
	.color_active{
		color: #FF3A3A;
	}
	.no_info{
		padding-top: 100rpx;
		padding-bottom: 60rpx;
	}
</style>
